<template>
  <router-layout id="_layout_tabbar">
    <van-nav-bar slot="header" :title="$route.meta.title" @click-right="$router.push({ name: 'MyQrCode' })">
      <template #right>
        <van-icon name="qr" size="22" color="#666" />
      </template>
    </van-nav-bar>
    <router-view></router-view>
    <van-tabbar slot="footer" :fixed="false" active-color="#0278e9" v-model="active" route>
      <van-tabbar-item to="/home" icon="wap-home-o">消费</van-tabbar-item>
      <!-- <van-tabbar-item to="/nutrition" icon="hotel-o">营养</van-tabbar-item> -->
      <van-tabbar-item to="/order" icon="balance-list-o">订单</van-tabbar-item>
      <van-tabbar-item to="/mine" icon="contact">我的</van-tabbar-item>
    </van-tabbar>
  </router-layout>
</template>
<script>
import { Tabbar, TabbarItem, NavBar } from 'vant'
export default {
  data() {
    return {
      active: 0
    }
  },
  mounted() {
    switch (this.$route.name) {
      case 'tabBarHome':
        this.active = 0
        break
      case 'tabBarLearn':
        this.active = 1
        break
      case 'tabBarMy':
        this.active = 2
        break
      default:
        this.active = 0
        break
    }
  },
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
    [NavBar.name]: NavBar
  }
}
</script>
<style lang="less">
#_layout_tabbar {
  background-color: #eee;
  .vue-route-transition-wrapper {
    background-color: #f9f9f9;
  }
}
</style>
